<template>
  <div class="user-info-panel">
    <nav-back />
    <div class="info-item">
      <span class="info-name">头像</span>
      <div class="info-content">
        <div class="avatar" :style="{backgroundImage:`url('${avatar}')`}"></div>
      </div>
      <i class="arrow" :style="{backgroundImage:`url('${arrowIco}')`}"></i>
    </div>

    <div class="info-item" @click="handleEdit('nickname')">
      <span class="info-name">昵称</span>
      <div class="info-content">{{nickname}}</div>
      <i class="arrow" :style="{backgroundImage:`url('${arrowIco}')`}"></i>
    </div>

    <div class="info-item" @click="handleEdit('email')">
      <span class="info-name">邮箱</span>
      <div class="info-content">{{email}}</div>
      <i class="arrow" :style="{backgroundImage:`url('${arrowIco}')`}"></i>
    </div>

    <button-comp
      class="logout-btn"
      text="退出登陆"
      fill
      size="large"
      @click.native="handleLogout"
    />

    <edit-cover-layer
      :showCover="showCover"
      :editingType="editingType"
      :handleCencel="handleCencel"
      :handleConfirm="handleConfirm"
    />
  </div>
</template>

<script>
import { mapState, mapActions } from 'vuex'
import { NavBack, SectionTitle, ButtonComp } from '@/components'
import arrowIco from '@/assets/icons/link-to.png'
import EditCoverLayer from './edit-cover-layer'

export default {
  name: 'user-info-panel',
  components: { EditCoverLayer, NavBack, SectionTitle, ButtonComp },
  computed: { ...mapState('User', ['nickname', 'email', 'avatar']) },
  data: () => ({
    arrowIco,
    showCover: false,
    editingType: '' // email,nickname
  }),
  methods: {
    ...mapActions('User', ['updateUser', 'logout']),
    ...mapActions('Toast', ['addToast']),
    handleEdit(type) {
      this.showCover = true
      this.editingType = type
    },
    handleCencel() {
      this.showCover = false
    },
    handleConfirm(data) {
      this.showCover = false
      const params = {}
      params[this.editingType] = data
      this.updateUser(params).then(() => {
        this.addToast({ type: 'success', content: '更新成功' })
      })
    },
    handleLogout() {
      this.logout().then(() => {
        this.addToast({ content: '已退出登陆' })
        this.$router.replace({ name: 'find' })
      })
    }
  }
}
</script>

<style lang="stylus" scoped>
$arrow-w = 14px;
$arrow-h = 24px;
$arrow-scale = 0.5;
$avatar-size = 60px;

.user-info-panel {
  background-color: #fff;

  .info-item {
    display: flex;
    align-items: center;
    margin: 0 16px 16px;
    padding: 14px 0;
    border-bottom: 1px solid $border-color;

    .info-name {
      flex: 1;
    }

    .info-content {
      margin: 0 16px;
    }

    .arrow {
      width: $arrow-scale * $arrow-w;
      height: $arrow-scale * $arrow-h;
      background: center / cover no-repeat;
    }

    .avatar {
      width: $avatar-size;
      height: $avatar-size;
      background: center / cover no-repeat;
      border-radius: 50%;
    }
  }

  .logout-btn {
    margin-top: 30px;
    background-color: $error-color;
  }
}
</style>
